import cx from 'classnames';
import React from 'react';
import styles from './index.less';
const Star = ({ color = '#fff' }: { color?: string }) => {
  const width = 20;
  const half = 10; //width/2;
  const quat = 5; //width/4;
  return (
    <svg
      version="1.1"
      viewBox={'0 0 ' + width + ' ' + width + ''}
      height={width}
      width={width}
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <path
        d={
          'M 0 ' +
          half +
          ' c ' +
          quat +
          ' 0 ' +
          half +
          ' -' +
          quat +
          ' ' +
          half +
          ' -' +
          half +
          ' c 0 ' +
          quat +
          ' ' +
          quat +
          ' ' +
          half +
          ' ' +
          half +
          ' ' +
          half +
          ' c -' +
          quat +
          ' 0 -' +
          half +
          ' ' +
          quat +
          ' -' +
          half +
          ' ' +
          half +
          ' c 0 -' +
          quat +
          ' -' +
          quat +
          ' -' +
          half +
          ' -' +
          half +
          ' -' +
          half +
          ''
        }
        stroke={color}
        strokeWidth={1}
        fill={color}
      />
    </svg>
  );
};
const baseAttr = {
  stroke: '#000',
  strokeMiterlimit: 10,
};
const Head = ({ className }: { className?: string }) => {
  const st7 = { fill: 'none', strokeWidth: 1.1339, ...baseAttr };
  const st11 = { fill: '#F5F4F5', ...baseAttr };
  const st12 = { fill: '#263753', ...baseAttr };
  const st13 = { fill: '#FFFFFF', strokeWidth: 0.8504, ...baseAttr };
  const st14 = { fill: '#D1D2D3' };
  return (
    <g className={className}>
      <circle {...st11} cx="109.97" cy="47.67" r="24.76" />
      <path
        {...st7}
        d="M129.7,48.89c0,12.45-9.77,21.83-23.26,21.83c-11.34,0-20.83-9.38-20.83-21.83s9.19-22.54,20.53-22.54   S129.7,36.45,129.7,48.89z"
      />
      <path
        {...st12}
        d="M127.27,48.89c0,13.7-10.8,19.93-23.03,19.93c-10.28,0-18.62-8.92-18.62-19.93s8.34-19.93,18.62-19.93   S127.27,36.27,127.27,48.89z"
      />
      <ellipse {...st13} cx="132.12" cy="50.57" rx="6.65" ry="9.14" />
      <ellipse {...st13} cx="133.42" cy="50.81" rx="4.88" ry="7.29" />
      <path
        {...st14}
        d="M108.4,31.99c0,0-18.36,2.93-17.52,21.29C90.88,53.28,81.24,27.97,108.4,31.99z"
      />
      <ellipse {...st14} cx="119.26" cy="46.08" rx="3.48" ry="4.02" />
      <ellipse {...st14} cx="119.2" cy="53.64" rx="1.48" ry="1.74" />
    </g>
  );
};
const Rocket = () => {
  const st0 = { fill: '#FFFFFF', strokeWidth: 1.9843, ...baseAttr };
  const st1 = { fill: '#EE212A', ...baseAttr };
  const st2 = { fill: '#E38F1C' };
  const st3 = { fill: '#F5F209' };
  const st4 = { fill: 'none', strokeWidth: 1.4173, ...baseAttr };
  const st5 = { fill: '#FF0000', strokeWidth: 1.9843, ...baseAttr };
  const st6 = { fill: '#FFFFFF', strokeWidth: 1.7008, ...baseAttr };
  const st7 = { fill: 'none', strokeWidth: 1.1339, ...baseAttr };
  const st8 = { fill: '#EA2620', strokeWidth: 1.1339, ...baseAttr };
  const st9 = { fill: '#EA2620', ...baseAttr };
  const st10 = { fill: '#2588D8', ...baseAttr };
  const st15 = { fill: 'none', strokeWidth: 1.9843, ...baseAttr };
  const st16 = { fill: '#FFFFFF', ...baseAttr };
  const st17 = { fill: 'none', ...baseAttr };
  const st18 = { style: { opacity: 0.3 } };
  const st19 = { fill: '#CE4E58', strokeWidth: 1.9843, ...baseAttr };
  const st20 = { fill: '#A7856D', strokeWidth: 1.4173, ...baseAttr };
  const st21 = { fill: '#FFFFFF', strokeWidth: 1.4173, ...baseAttr };
  return (
    <svg version="1.1" viewBox="0 0 200 200">
      <g>
        <g>
          <path
            {...st0}
            d="M155.08,144.61l-3.13,10.29c0,0-1.57,2.85-9.34,0s-14.82-8.47-13.76-12.19c1.12-3.92,11.57-5.13,18.01-3.47    C155.08,141.37,155.08,144.61,155.08,144.61z"
          />
          <path
            {...st1}
            d="M156.08,152.78l1.23-4.59c0,0,1.09-1.65,4.31-1.51c3.22,0.14,11.68,7.83,11.28,9.01    c-0.39,1.17-11.4,2.29-14.18,0.48C155.83,154.29,156.08,152.78,156.08,152.78z"
          />
          <path
            {...st2}
            d="M157.26,152.57l0.94-3.5c0,0,0.75-1.1,3.2-0.99s9,5.81,8.7,6.71c-0.3,0.9-8.72,1.58-10.84,0.2    C157.05,153.55,157.26,152.57,157.26,152.57z"
          />
          <path
            {...st3}
            d="M157.53,152.11l0.76-2.82c0,0,1.15-0.5,2.15-0.43c2.03,0.14,7.28,4.35,7.03,5.09s-5.89,1.52-8.74-0.29    C157.91,153.14,157.53,152.11,157.53,152.11z"
          />
          <path {...st4} d="M146.85,139.24c0,0-4.08,5.31-4.25,15.66" />
          <path
            {...st5}
            d="M155.08,144.61l-3.13,10.29c0,0,1.25,1.71,3.13,1.27c1.34-0.32,4.31-9.88,3.52-11    C157.43,143.51,155.08,144.61,155.08,144.61z"
          />
        </g>
        <g>
          <path
            {...st0}
            d="M145.96,173.32l-3.16,10.39c0,0-1.58,2.88-9.43,0s-14.96-8.55-13.89-12.31c1.13-3.95,11.68-5.18,18.18-3.5    C145.96,170.04,145.96,173.32,145.96,173.32z"
          />
          <path
            {...st1}
            d="M146.98,181.56l1.24-4.63c0,0,1.1-1.67,4.35-1.52c3.25,0.14,11.79,7.91,11.39,9.09s-11.51,2.31-14.31,0.49    C146.72,183.09,146.98,181.56,146.98,181.56z"
          />
          <path
            {...st2}
            d="M148.16,181.35l0.95-3.53c0,0,0.75-1.11,3.23-1c2.48,0.11,9.08,5.87,8.78,6.77s-8.8,1.59-10.94,0.2    C147.95,182.34,148.16,181.35,148.16,181.35z"
          />
          <path
            {...st3}
            d="M148.44,180.89l0.76-2.85c0,0,1.16-0.5,2.17-0.43c2.05,0.14,7.35,4.39,7.1,5.14s-5.94,1.54-8.82-0.3    C148.82,181.92,148.44,180.89,148.44,180.89z"
          />
          <path {...st4} d="M137.66,167.9c0,0-4.12,5.36-4.29,15.81" />
          <path
            {...st5}
            d="M145.96,173.32l-3.16,10.39c0,0,1.26,1.73,3.16,1.28c1.36-0.32,4.35-9.98,3.56-11.11    C148.34,172.2,145.96,173.32,145.96,173.32z"
          />
        </g>
        <g>
          <path
            {...st6}
            d="M143.78,169.24c0,0-26.42,12.65-65.67,2.23s-61.4-36.09-60.84-41.49c0.56-5.4,31.07-18.05,70.88-8.93    s58.23,36.28,58.23,36.28C146.75,163.12,146.08,165.79,143.78,169.24z"
          />
          <path
            {...st7}
            d="M101.77,175.37c25.84,1.62,42.01-6.13,42.01-6.13c2.3-3.45,2.97-6.12,2.6-11.91c0,0-10.69-15.76-33.37-27.3    c0,0-4.95,6.14-8.58,21.63S101.77,175.37,101.77,175.37z"
          />
          <path
            {...st8}
            d="M39.45,153.84c-14.72-10.14-22.51-20.62-22.18-23.85c0.35-3.37,12.4-9.58,31.11-11.53    c0,0-5.06,7.5-7.29,16.74C39.2,143.01,39.45,153.84,39.45,153.84z"
          />
        </g>
        <g>
          <path
            {...st0}
            d="M152.22,158.01l-3.91,12.84c0,0-1.95,3.56-11.65,0c-9.7-3.56-18.49-10.56-17.16-15.21    c1.39-4.88,14.44-6.4,22.46-4.33C152.22,153.96,152.22,158.01,152.22,158.01z"
          />
          <path
            {...st1}
            d="M153.48,168.19l1.53-5.72c0,0,1.36-2.06,5.37-1.88c4.01,0.17,14.56,9.77,14.07,11.23    c-0.49,1.47-14.22,2.86-17.68,0.6C153.16,170.08,153.48,168.19,153.48,168.19z"
          />
          <path
            {...st2}
            d="M154.94,167.93l1.17-4.36c0,0,0.93-1.37,3.99-1.24s11.22,7.25,10.85,8.37s-10.87,1.97-13.52,0.25    C154.68,169.16,154.94,167.93,154.94,167.93z"
          />
          <path
            {...st3}
            d="M155.28,167.36l0.94-3.52c0,0,1.43-0.62,2.68-0.53c2.53,0.18,9.08,5.42,8.77,6.35s-7.34,1.9-10.9-0.37    C155.76,168.64,155.28,167.36,155.28,167.36z"
          />
          <path {...st4} d="M136.66,170.85c0.21-12.91,5.3-19.53,5.3-19.53" />
          <path
            {...st5}
            d="M152.22,158.01l-3.91,12.84c0,0,1.55,2.14,3.91,1.58c1.67-0.4,5.37-12.33,4.4-13.72    C155.16,156.63,152.22,158.01,152.22,158.01z"
          />
        </g>
        <circle {...st9} cx="69.55" cy="142.11" r="17.02" />
        <circle {...st10} cx="69.55" cy="142.11" r="10.89" />
      </g>
      <g className={styles.humanBox}>
        <g className={styles.human}>
          <Head className={styles.head} />
          <g>
            <path
              {...st0}
              d="M135.8,72.59c0,0,2.82,22.25,0,27.21s-8.65,5.35-10.34,5.53s-3.01-31.42-3.01-31.42L135.8,72.59z"
            />
            <path
              {...st0}
              d="M87.97,68.5c0,0,0,10.74-1.12,14.79c-1.12,4.05-6.14,6.56-10.19,10.05s-8.93,10.74-8.79,18.42   s7.95,16.74,17.58,0c0,0,2.79-4.19,7.53-6c4.74-1.81,14.93,2.79,16.88,6s0.84,10.19,2.79,17.44c1.95,7.26,11.86,12,14.65-3.91   s2.09-42,1.4-48.14c0,0,8.37-1.26,14.65-2.37s13.4-1.81,13.4-7.67c0-5.86-11.16-5.86-15.49-6c-1.18-0.04-5.03-0.14-10.19-0.14   c-2.58,0-3.13,10.36-21.97,11.51c-12.72,0.12-17.39-8.05-19.77-10.45c-0.29-0.29-1.65-0.37-1.65-0.37s20.93,1.12,20.23-9.21   c-0.7-10.33-18.98-7.81-25.81-5.44S68.92,64.1,87.62,70.94L87.97,68.5z"
            />
            <path {...st15} d="M71.36,99.8c0,0,11.21,2.07,14.78,11.06" />
            <path {...st15} d="M111.19,117.84c0,0,10.52-4.78,16.88,2.24" />
            <path {...st15} d="M141.27,61.1c0,0-0.28,8.37,2.09,13.67" />
            <path {...st15} d="M91.36,45.1c0,0-1.92,11.19,2.33,16.42" />
          </g>
          <g>
            <path
              {...st16}
              d="M91.98,80.43c0,0-3.09-1.43-4.81-1.34c-1.73,0.09-4.12,3.23-1.62,5.08c2.49,1.85,6.91,0.7,6.91,0.7   L91.98,80.43z"
            />
            <path
              {...st16}
              d="M89.5,92.15c0.54,1.43,23.02,5.37,25.47,4.53c2.44-0.84,3.7-14.09,3-15.7c-0.7-1.6-23.86-5.65-25.26-4.88   S88.87,90.47,89.5,92.15z"
            />
            <path
              {...st16}
              d="M116.78,90.89c-1.63-1.06-2.16-4.93,0.91-4.49c3.07,0.44,6.88,1.55,11.37,0.13c1.61-0.84,5.93,0.9,1.54,3.88   C126.2,93.4,118.18,91.8,116.78,90.89z"
            />
            <path
              {...st17}
              d="M98.29,77.01c0,0-1.6,7.19-1.19,8.79c0.42,1.6,1.95,0.14,2.72,1.33c0.77,1.19-0.84,7.68-0.84,7.68"
            />
            <path {...st17} d="M113.81,79.41c0,0,0.9,9.18-2.98,17.2" />
          </g>
          <g {...st18}>
            <path d="M69.4,117.85c0,0,2.56,5.24,10.28,1.56c0,0,20.15,2.91,33.1,10.18c0,0,1.65,7.88,9.91,6.04c0,0,2.24,0.53,3.02,1.95   c0,0-31.88,5.94-59.32-19.72H69.4z" />
            <path d="M85.91,111.14c0,0-6.84,14.09-14.12,8.94s-2.86-14.82,0-20.98c0,0,2.76,12.27,8.65,9.53s11.14-12.41,18.09-11.04   c6.95,1.37,12.98,5.75,14.89,15.97s10.59,10.03,14.55,7.25c0,0-1.15,15.22-8.35,15.07c-7.21-0.15-8.99-13.64-8.8-17.71   C111.19,110.18,98.54,97.58,85.91,111.14z" />
            <path d="M129.18,104.33c0,0,6.9-1.39,7.38-6.88c0,0-4.39,3.31-7.25,1.22L129.18,104.33z" />
            <path d="M89.93,63.95c0,0,15.38,20.48,39.57-0.45C129.5,63.5,104.53,94.43,89.93,63.95z" />
          </g>
        </g>
      </g>
      <g {...st18}>
        <path d="M131.4,169.37c-66.45,4.31-102.89-28-113.99-39.95c-0.08,0.18-0.12,0.36-0.14,0.53c-0.56,5.4,21.58,31.07,60.84,41.49   c26.96,7.16,47.88,3.48,58.31,0.39C139.14,171.02,135.63,169.1,131.4,169.37z" />
        <path d="M69.55,159.13c-9.4,0-17.02-7.62-17.02-17.02c0-0.98,0.1-1.93,0.26-2.86c-0.43,1.49-0.67,3.05-0.67,4.68   c0,9.4,7.62,17.02,17.02,17.02c8.43,0,15.4-6.13,16.76-14.16C83.87,153.91,77.33,159.13,69.55,159.13z" />
        <path d="M148.32,170.85l3.91-12.84c0,0,0-0.58-0.56-1.45c-0.65,4.27-2.78,10.73-9.7,11.33c-7.1,0.62-16.89-7.32-22.4-12.43   c-0.02,0.06-0.05,0.11-0.06,0.17c-1.33,4.64,7.46,11.65,17.16,15.21C146.36,174.4,148.32,170.85,148.32,170.85z" />
        <path d="M142.35,183.89l2.91-9.57c0,0-2.49,6.92-7.65,7.37c-5.29,0.46-12.59-5.46-16.7-9.27c-0.01,0.04-0.03,0.08-0.05,0.13   c-0.99,3.46,5.56,8.69,12.79,11.34C140.89,186.55,142.35,183.89,142.35,183.89z" />
        <path d="M151.31,155.17l3.74-11.95c0,0-2.86,7.11-7.5,7.18c-3.91,0.06-7.69-2.86-9.58-3.57c-0.01,0.04-1.44,2.33,5.79,4.98   C150.98,154.47,151.31,155.17,151.31,155.17z" />
        <path d="M130.01,174.01c0,0,4.62,2.37,6.66,1.16c0,0,5.45,2.87,7.72,0.39s1.16-2.61,1.16-2.61l-8.16-1.37L130.01,174.01z" />
      </g>
      <g className={styles.human2}>
        <g className={styles.flag}>
          <path
            {...st19}
            d="M174.48,40.18L163.73,65.3c0,0-9.63-4.19-13.67-10.88c-4.05-6.7-12.7-7.95-20.51-6.28l7.26-25.12   c0,0,14.93-7.67,22.6,4.05S170.43,38.23,174.48,40.18z"
          />
          <path
            {...st20}
            d="M117.1,76.88l17.89-56.65c0,0,3.98-5.02,4.19,1.4c-1.4,6.42-17.58,56.65-17.58,56.65S117.35,83.3,117.1,76.88   z"
          />
        </g>
        <path
          {...st0}
          d="M120.21,90.81c0,0,3.21,16.07,2.96,22.5c-0.26,6.43-6.04,12.6-14.53,9.26S111.47,88.24,120.21,90.81z"
        />
        <path
          {...st0}
          d="M76.12,107.78c-0.26,2.83-13.75,6.81-14.01,9.9c0,0,13.63,1.67,21.6,0.9c0,0-11.05,1.29-9.77,11.7   c1.29,10.41,7.71,15.81,11.57,11.57c3.86-4.24,3.34-9.13,8.23-11.95c4.88-2.83,9.38,0.04,15.17-4.35   c5.78-4.39,6.04-19.17,4.76-25.73c0,0,9.38-5.91,13.24-18.12c3.86-12.21-5.78-13.63-13.75-5.14s-11.05,13.37-21.98,15.43   s-21.82-2.73-26.99-6.3c-5.78-3.98-22.24-0.77-4.63,13.24C72.32,109.08,76.38,104.95,76.12,107.78z"
        />
        <path {...st4} d="M64.42,86.06c0,0,0,7.71-4.88,12.08" />
        <path {...st4} d="M110.44,80.14c0,0,3.73,7.84,11.95,11.05" />
        <path
          {...st21}
          d="M93.6,115.88l0.51-16.45c0,0-20.95-1.03-22.24,1.54c-1.29,2.57-1.67,11.44,0,12.98   C73.55,115.49,93.6,115.88,93.6,115.88z"
        />
        <line {...st4} x1="88.97" y1="99.3" x2="88.97" y2="115.75" />
        <polyline
          {...st4}
          points="82.44,99.3 82.44,107.08 80.36,108.55 80.36,114.59  "
        />
        <path {...st4} d="M74.32,125.78c0,0,11.44-3.34,16.71,5.78" />
        <path
          {...st21}
          d="M94.12,110.22c6.52,1.17,17.12,0.9,20.3,0.51c2.74-0.34,4.64-6.81-0.76-5.27c-5.4,1.54-17.13,0.74-19.54,0.64   C91.71,106.01,89.1,109.32,94.12,110.22z"
        />
        <Head className={styles.head2} />
        <g {...st18}>
          <path d="M74.32,132.57c0,0,2.79,3.42,6.69,3.14s4.55-7.94,8.69-10.53c4.14-2.59,13.77-0.39,23.82-10.59c0,0,0.91,6.82-4.88,10.59   c-5.79,3.76-15.01,2.51-17.38,6c-2.37,3.49-5.23,13.71-9.27,12.12C77.93,141.71,75.59,137.18,74.32,132.57z" />
          <path d="M114,116.66c0,0,4.08,1.78,8.76-3.98c0,0,0.59,11.06-10.67,10.82L114,116.66z" />
          <path d="M70.76,108.15c0,0,8.78,4.72,22.84,2.37v5.35c0,0-20.39-0.21-21.83-2.04C70.34,112.01,70.76,108.15,70.76,108.15z" />
          <path d="M113.56,100.13c0,0-0.68-2.72-1.8-4.4c-1.12-1.67,6.54-1.76,15.26-16.9C127.03,78.83,128.55,88.55,113.56,100.13z" />
          <path d="M71.49,102.03l-0.78,3.5c0,0-12.42-4.78-17.81-13.42C52.9,92.1,58.42,97.5,71.49,102.03z" />
          <path d="M43.78,118.59c0,0,16.18-2.35,36.66,0.02c0,0-11.79,5.4-5.06,17.11s9.76,8.74,17.05-5.65c0.8-1.58,10.03-2.65,13.83-3.17   c1.41-0.19,4.41,1.97,4.41,1.97s-0.17,1.01-2.16,1.66c-4.14,1.36-11.34,1.03-13.71,3.78c-4.33,5.02-3.9,9.48-8.09,11.77   c-4.41,2.42-17.05,1.69-17.17-17.05c-0.07-10.93-16.74-6.44-21.77-7.55C42.77,120.36,43.78,118.59,43.78,118.59z" />
        </g>
      </g>
    </svg>
  );
};
interface ViewProps extends React.HTMLAttributes<HTMLSpanElement> {
  active?: boolean;
}
export default class ButtonDayNight3 extends React.Component<ViewProps> {
  public render() {
    const { active, className, children, ...restProps } = this.props;
    return (
      <span
        className={cx(styles.button, { [styles.night]: active }, className)}
        {...restProps}
      >
        <span className={styles.btnInner}>
          <span className={styles.bg}></span>
          <span className={cx(styles.bg, styles.bg2)}></span>
          <span className={styles.clouds}>
            {new Array(5).fill(1).map((e, ind) => (
              <span
                className={cx(styles.cloud, styles['cloud' + (ind + 1)])}
                key={ind + 'cloud'}
              />
            ))}
          </span>
          <span className={styles.circle}>
            <span className={styles.circleNight}>
              <span className={styles.crater} />
              <span className={cx(styles.crater, styles.crater2)} />
              <span className={cx(styles.crater, styles.crater3)} />
            </span>
          </span>
          <span className={cx(styles.clouds, styles.clouds2)}>
            {new Array(5).fill(1).map((e, ind) => (
              <span
                className={cx(styles.cloud, styles['cloud' + (ind + 1)])}
                key={ind + 'cloud'}
              />
            ))}
          </span>
          <span className={styles.stars}>
            {new Array(9).fill(1).map((e, ind) => (
              <span
                className={cx(styles.star, styles['star' + (ind + 1)])}
                key={ind + 'star'}
              >
                <Star />
              </span>
            ))}
          </span>
          <span className={styles.rocketBox}>
            <span className={styles.rocketInner}>
              <Rocket />
            </span>
          </span>
        </span>
      </span>
    );
  }
}
